@charset "UTF-8";
header, footer {
  width: 4rem;
  height: 0.42rem;
  background: green;
}

footer {
  height: 0.47rem;
}

main {
  flex: 1;
}

/*头部布局开始*/
header, footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.1rem;
  box-sizing: border-box;
}

header > span.iconfont, footer > span.iconfont {
  font-size: 0.2rem;
}

header > h3, footer > h3 {
  font-size: 0.16rem;
}

/*头部布局结束*/
/*内容开始*/
main > .main-banner > .swiper-wrapper > .swiper-slide > img {
  width: 100%;
}

main > ul {
  width: 4rem;
  height: 1rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

main > ul > li {
  text-align: center;
  box-sizing: border-box;
}

main > ul > li > p {
  padding-top: 14px;
}

main > img {
  width: 100%;
  padding-top: 10px;
  box-sizing: border-box;
}

/*内容结束*/
/*底部布局开始*/
footer {
  border-top: solid 2px #e6e6e6;
  background: #fff;
  box-sizing: border-box;
}

footer > ul {
  width: 4rem;
  height: 0.45rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

footer > ul > li {
  text-align: center;
  color: #bdbdbd;
}

footer > ul > li > span.iconfont {
  font-size: 0.22rem;
}

footer > ul > li > p {
  font-size: 0.12rem;
}

footer > ul > li.footr-active {
  color: red;
}

/*底部布局结束*/
